<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>css选择器</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html {
				--mi_color: #ff6900;
			}

			/*:root {*/
			/*    --mi_color2: pink;*/
			/*}*/

			.mi_header {
				width: 100%;
				height: 60px;
				display: flex;
				/*flex-wrap: row wrap;*/
				justify-content: space-between;
				align-items: center;
				padding: 10px 10px 0 10px;
				color: #333;
			}

			.mi_header:hover .mi_nav_item:first-child {
				color: #333;
			}

			.mi_logo {
				width: 50px;
				height: 50px;
				border-radius: 35%;
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 50px;
				/*margin-left: 10px;*/

				/*display: flex;*/
				/*justify-content: center;*/
				/*align-items: center;*/
				background-color: var(--mi_color);
			}

			.mi_nav {
				/*width: calc(100% - 170px);*/
				flex: 1;
				height: 50px;
				display: flex;
				justify-content: center;
				/*justify-content: space-around;*/
				/*justify-content: space-evenly;*/
				align-items: center;
				gap: 30px;
			}

			.mi_nav_item {
				/* margin-right: 30px; */
				cursor: pointer;
				/* 过渡 */
				transition: color 0.5s;
			}

			.mi_nav_item:hover {
				color: var(--mi_color);
			}

			.mi_nav_item:first-child {
				color: var(--mi_color);
			}

			/*.mi_nav_item:last-child {*/
			/*    margin-right: 0;*/
			/*}*/

			.mi_login {
				width: 200px;
				height: 50px;
				/*margin-right: 10px;*/
			}

			/*.mi_header:first-child {}*/

			/*.mi_header:last-child {}*/

			/*.mi_header:nth-child(2){}*/

			.tran {
				width: 100px;
				height: 100px;
				background-color: var(--mi_color);
				cursor: pointer;
				transition: all 1s;
			}

			.tran:hover {
				width: 200px;
				height: 200px;
				background-color: pink;
			}

			@keyframes a1 {
				0% {
					transform: translateX(0) rotate(0deg) scale(1);
				}

				50% {
					transform: translateX(150px) rotate(180deg) scale(1.5);
				}

				100% {
					transform: translateX(300px) rotate(360deg) scale(1);
				}
			}

			.move {
				margin-top: 50px;
				width: 100px;
				height: 100px;
				/*transform: translate(x,y);*/
				background-color: var(--mi_color);
				animation-name: a1;
				/*transition: ;*/
				animation-timing-function: linear;
				animation-duration: 1s;
				animation-iteration-count: infinite;
				/*animation-fill-mode: revert;*/
				/*animation-direction: normal;*/
				/*animation-direction: reverse;*/
				animation-direction: alternate;
			}
		</style>
	</head>
	<body>
		<!-- 类、id、元素 -->
		<header class="mi_header">
			<div class="mi_logo">mi</div>
			<div class="mi_nav">
				<div class="mi_nav_item">小米官网</div>
				<div class="mi_nav_item">小米官网</div>
				<div class="mi_nav_item">小米官网</div>
				<div class="mi_nav_item">小米官网</div>
				<div class="mi_nav_item">小米官网</div>
			</div>
			<div class="mi_login"></div>
		</header>

		<div class="tran"></div>
		<div class="move"></div>
	</body>
</html>
